<template>
  <div class="main-container">
    <top-header :name="name" />
    <aside>
      <router-link v-for="d in filterNavList" :key="d.path" :to="d.path">
        {{ d.label }}
      </router-link>
    </aside>
    <main>
      <router-view />
    </main>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import TopHeader from "../components/TopHeader.vue";
export default {
  components: {
    TopHeader,
  },
  data() {
    return {
      navList: [
        {
          label: "系统概览",
          path: "/main/overview",
          permission: 'overview'
        },
        {
          label: "设备登记",
          path: "/main/register/list",
          permission: 'register'
        },
        {
          label: "数据字典",
          path: "/main/dictionary",
          permission: 'dictionary'
        },
      ],
      name: "",
    };
  },
  computed: {
    // 有权限的栏目
    filterNavList() {
      return this.navList.filter(item => {
        return this.$store.state.permissions.includes(item.permission);
      })
    }
  },
  created() {
    // const xhr = new XMLHttpRequest();
    // xhr.open('get', '/equipment/who');
    // xhr.onreadystatechange = () => {
    //   if (xhr.readyState === 4 && xhr.status === 200) {
    //     let data = JSON.parse(xhr.responseText);
    //     console.log('main', data);
    //   }
    // }
    // xhr.send(null);

    this.axios.get("/who").then((res) => {
      console.log("main", res);
      if (!res.code) {
        this.name = res.data.name;

        // this.$store.commit('setRole', res.data.role);
        // this.$store.commit('setPermissions', res.data.permissions);

        // actions 不能直接调用，必须使用 dispatch
        // this.$store.dispatch('setUser', res.data);
        this.setUser(res.data);
      }
    });

    this.getStatus();
    this.getCategory();
  },
  methods: {

    // setUser(user) {
    //   this.$store.dispatch('setUser', user);
    // },
    ...mapActions(['setUser']),


    getStatus() {
      this.axios.get("/status-list?type=pre").then((res) => {
        if (!res.code) {
          console.log('状态', res.data);
          // 通过 $store 的 commit 调用 mutation，第一个参数是方法名称，第二个参数是传递过去的数据
          this.$store.commit('setStatusList', res.data);
        }
      });
    },

    getCategory() {
      this.axios.get("/category-list").then((res) => {
        if (!res.code) {
          console.log('分类', res.data);
          // 通过 $store 的 commit 调用 mutation，第一个参数是方法名称，第二个参数是传递过去的数据
          this.$store.commit('setCategoryList', res.data);
        }
      });
    },
  },
};
</script>

<style lang="sass">
.main-container
  & > *
    position: fixed
    top: 0px
    bottom: 0
    left: 0
    right: 0
  header
    bottom: auto
    height: 60px
    background: #0079c4
  aside
    right: auto
    top: 60px
    width: 190px
    background: #2c405a
    padding: 15px 10px
    a
      display: block
      line-height: 42px
      padding: 0 15px
      border-radius: 4px
      color: #fff
      font-size: 16px
      transition: .3s
      &.router-link-active
        background: #3f536e
  main
    top: 60px
    left: 190px
    overflow: auto
</style>
